import type { CSSProperties } from 'react'
import type { NavBarProps } from './props'
import { View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import classNames from 'classnames'
import { AtNavBar } from 'taro-ui'
import { presetProps } from './presets'
import './nav-bar.scss'

export function NavBar({
  leftType = 'back',
  bgColor = '#fff',
  fixed = false,
  ...navBarProps
}: NavBarProps) {
  const props = presetProps(leftType, navBarProps)

  let statusBarHeight = 0
  let menuSpace = 0
  if (process.env.TARO_ENV === 'weapp') {
    const info = Taro.getSystemInfoSync()
    statusBarHeight = info.statusBarHeight || 0

    const menu = Taro.getMenuButtonBoundingClientRect()
    menuSpace = info.screenWidth - menu.left
  }

  return (
    <>
      {fixed && <View style={{ height: `${statusBarHeight + 44}px` }} />}
      <View
        style={{
          'backgroundColor': bgColor,
          'paddingTop': `${statusBarHeight}px`,
          'paddingRight': `${menuSpace}px`,
          '--menu-space': `${menuSpace}px`,
          '--hairline-color': props.color,
        } as CSSProperties}
        className={classNames('nav-bar', {
          'nav-bar--weapp': process.env.TARO_ENV === 'weapp',
          'nav-bar-fixed': fixed,
          'hairline-bottom': props.border,
        })}
      >
        <AtNavBar {...props} border={false} customStyle={{ backgroundColor: bgColor }} />
      </View>
    </>
  )
}
